<template>
	<gracePage headerBG="#FFFFFF">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">发表评论</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" style="margin-bottom: 150rpx;">
			<view class="grace-list m-2">
				<view class="grace-list-items">
					<view class="my-list-image ucenter-face grace-relative"><image class="my-list-image ucenter-face-image" :src="goods.goods_thumb" mode="widthFix"></image></view>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
						</view>
						<view class="grace-list-title pb-1">
							<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
						</view>
						<view class="grace-space-between mt-1 grace-flex-vcenter">
							<text class="grace-h5 grace-red">￥{{ goods.goods_price }}</text>
							<text class="font-size-22 pr-2">x{{ goods.goods_number }}</text>
						</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="m-2">
				<view class="grace-wrap grace-flex-vcenter">
					<text class="grace-form-label" style="height: 70rpx;line-height: 70rpx;">商品评价</text>
					<graceStar :starnum="currentStarNum1" v-on:starchange="starchange" activecolor="#fa0000"></graceStar>
				</view>
				<view class="release-content ">
					<view><textarea name="content" placeholder="认真描述你的评价,可以帮到更多的人" class="release-content-input" value="" v-model="textareades" /></view>
				</view>
			</view>
			<!-- 图片选择  -->
			<view class="grace-title grace-margin-top  mx-2">
				<text class="grace-title-text grace-black">上传凭证</text>
				<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="clearAllImgs">清空图片</text>
			</view>
			<view style="margin-top:5rpx;" class="mb-3  mx-2">
				<graceSelectImgAndUpload
					:maxFileNumber="3"
					ref="selectimgandupload"
					@removeImg="removeImg"
					@uploaded="imgLoaded"
					@change="imgsChange"
					@uploaderror="uploaderror"
					fileName="file"
					:formData="{ user_id: userInfo.user_id, rec_id: orderId, type: 1 ,goods_id:goods.goods_id}"
					uploadServerUrl="https://zhenzhixiao.cn/api/upload_form.php"
				></graceSelectImgAndUpload>
			</view>
		</view>
		<view slot="gFooter" class="grace-footer grace-flex-end">
			<button type="primary" class="grace-button width-full" @tap="submitApply" :disabled="disabled">{{ subtxt }}</button>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceSelectImgAndUpload from '@/components/myVue/graceSelectImgAndUpload.vue';
import graceStar from '@/graceUI/components/graceStar.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			textareades: '',
			selectedimgs: [],
			// 上传按钮名称
			subtxt: '提交申请',
			// 订单id
			orderId: 0,
			// 1 待付款 2 待发货 3 待收货
			index: 0,
			goods: {},
			disabled: false,
			currentStarNum1: 5
		};
	},
	components: {
		gracePage,
		graceSelectImgAndUpload,
		graceStar
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	onLoad: function(e) {
		if (e.id) this.orderId = e.id;
		// 获取订单信息
		if (e.item) this.goods = JSON.parse(e.item);
	},
	methods: {
		// 选择图片时引起的数据变化
		imgsChange: function(imgs) {
			this.selectedimgs = imgs;
		},
		// 提交动态
		submitApply: function() {
			console.log('this.selectedimgs', this.selectedimgs);
			if (this.selectedimgs.length > 0) {
				this.subtxt = '图片上传中';
				this.$refs.selectimgandupload.upload();
			}
			if (this.textareades === '') {
				uni.showToast({ title: '请填写退货原因', icon: 'none' });
				this.subtxt = '提交申请';
				return;
			}
			console.log('提交评价');
			let options = {
				act:'add_comment',
				order_id:this.orderId,
				goods_id:this.goods.goods_id,
				comment_rank:this.currentStarNum1,
				content: this.textareades,
				product_id: this.goods.product_id
			}
			this.$HTTP.post('/api/api.php', options, { token: true }).then(res=>{
				// 返回上一个页面并传参
				setTimeout(()=>{
					uni.navigateBack();
				},1500)
				// 返回上一个页面并传参
				uni.$emit("evaluateStatus");
			})
		},
		// 提交表单
		imgLoaded: function(res) {
			this.subtxt = '数据提交中';
			console.log(res);
			console.log(this.textareaVal);
			// 提交数据 图片信息保存在 res 内[ 数组形式 ]
			// 内容保存在 textareaVal
			//连接 api 提交即可
			//提交成功页面跳转
		},
		uploaderror: function() {
			console.log('上传过程遇到错误');
		},
		// 清空图片
		clearAllImgs: function() {
			this.selectedimgs = [];
			this.$refs.selectimgandupload.clearAllImgs();
		},
		removeImg: function(e) {
			console.log('被删除的图片信息');
			console.log(e);
		},
		starchange: function(e) {
			console.log(JSON.stringify(e));
			this.currentStarNum1 = e;
			uni.showToast({
				title: e + '星',
				icon: 'none'
			});
		}
	}
};
</script>
<style>
.release-content {
	margin-top: 20rpx;
	background-color: #f7f7f7;
	border-radius: 10rpx;
}
.release-button {
	background: #3688ff;
	height: 50rpx;
	padding: 0 25rpx;
	line-height: 50rpx;
	border-radius: 50rpx;
	color: #ffffff;
	font-size: 22rpx;
}
.release-content-input {
	height: 180rpx;
	font-size: 28rpx;
	width: 650;
	color: #8e8080;
	padding: 25rpx;
	line-height: 46rpx;
}
.grace-button {
	height: 94rpx;
}
</style>
